<template>
  <div class="teaching-map-home" v-loading="loading">
    <el-scrollbar @end-reached="handleReachBottom">
      <div class="flex flex-wrap gap-20px">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="item-card py-23px px-26px relative"
          @click="handleClick(item)"
        >
          <div class="text-18px text-#333 mb-9px text-overflow-2" :title="item.name">{{
            item.name
          }}</div>
          <div class="text-16px text-#777 w-361px text-overflow-6" :title="item.description">{{
            item.description
          }}</div>
          <img class="w-105px absolute right-26px bottom-15px" :src="getIcon(index)" alt="" />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { usePageList } from '@/hooks/web/usePageList'
import { KnowledgeApi, Knowledge } from '@/api/school/knowledge/knowledge'
import cardIcon0 from '@/assets/imgs/teachingMap/0.png'
import cardIcon1 from '@/assets/imgs/teachingMap/1.png'
import cardIcon2 from '@/assets/imgs/teachingMap/2.png'
import cardIcon3 from '@/assets/imgs/teachingMap/3.png'
const iconMap = [cardIcon0, cardIcon1, cardIcon2, cardIcon3]
const toast = useMessage()
const router = useRouter()
const { list, loading, getList, handleReachBottom }: any = usePageList({
  toast,
  queryFn: KnowledgeApi.getKnowledgePage,
  query: {
    pageSize: 96
  }
})
const getIcon = (index: number) => {
  const icon = iconMap[index % 4]
  return icon
}
const handleClick = (item: Knowledge) => {
  router.push({
    name: 'teachingMap',
    query: {
      knowledgeId: item.id,
      name: item.name
    }
  })
}
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.teaching-map-home {
  height: $content-height;

  .item-card {
    width: calc((100% - 2 * 20px) / 3);
    height: 242px;
    cursor: pointer;
    background: rgb(255 255 255);
    border: 1px solid rgb(255 255 255 / 100%);
    border-radius: 16px;
    transition: box-shadow 0.2s ease-in-out;

    &:hover {
      box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    }

    &:nth-child(4n + 1) {
      background-image: linear-gradient(
        180deg,
        #fff 0%,
        rgb(233 230 253 / 75%) 25%,
        rgb(233 230 253 / 88%) 35%,
        rgb(233 230 253) 45%,
        rgb(233 230 253) 55%,
        rgb(233 230 253 / 88%) 65%,
        rgb(233 230 253 / 75%) 75%,
        #fff 100%
      );
    }

    &:nth-child(4n + 2) {
      background-image: linear-gradient(
        180deg,
        #fff 0%,
        rgb(247 225 230 / 75%) 25%,
        rgb(247 225 230 / 88%) 35%,
        rgb(247 225 230) 45%,
        rgb(247 225 230) 55%,
        rgb(247 225 230 / 88%) 65%,
        rgb(247 225 230 / 75%) 75%,
        #fff 100%
      );
    }

    &:nth-child(4n + 3) {
      background-image: linear-gradient(
        180deg,
        #fff 0%,
        rgb(213 236 253 / 75%) 25%,
        rgb(213 236 253 / 88%) 35%,
        rgb(213 236 253) 45%,
        rgb(213 236 253) 55%,
        rgb(213 236 253 / 88%) 65%,
        rgb(213 236 253 / 75%) 75%,
        #fff 100%
      );
    }

    &:nth-child(4n + 4) {
      background-image: linear-gradient(
        180deg,
        #fff 0%,
        rgb(211 245 242 / 75%) 25%,
        rgb(211 245 242 / 88%) 35%,
        rgb(211 245 242) 45%,
        rgb(211 245 242) 55%,
        rgb(211 245 242 / 88%) 65%,
        rgb(211 245 242 / 75%) 75%,
        #fff 100%
      );
    }
  }
}
</style>
